<script lang="ts" setup>
import {DataBoard} from "@element-plus/icons-vue";

const props = defineProps({
  info1: Object,
})
</script>


<template>
  <div style="width: 100%;height: 100%;padding: 2px;box-sizing: border-box;">
    <div class="title">总部类项目情况</div>
    <div class="body">
      <div class="left">
        <div class="bg">
          <el-icon style="padding: 10px" color="#FFFFFF" size="80"><DataBoard /></el-icon>
          <div style="padding: 10px;font-size: 18px;color: #aab4c0;">全职引进总部类</div>
          <div style="padding: 10px;font-size: 20px;color: white;">{{ props.info1?.total }}</div>
        </div>
      </div>
      <div class="right">
        <div>区域型总部项目<span>&nbsp;&nbsp;{{ props.info1?.value1[0] }}</span></div>
        <el-progress :percentage="props.info1?.value1[0]" color="#69FFE3" :show-text="false"/>
        <div>税源型总部项目<span>&nbsp;&nbsp;{{ props.info1?.value1[1] }}</span></div>
        <el-progress :percentage="props.info1?.value1[1]" color="#2196F3" :show-text="false"/>
        <div>企三级及国企子公司投资项目<span>&nbsp;&nbsp;{{ props.info1?.value1[2] }}</span></div>
        <el-progress :percentage="props.info1?.value1[2]" color="#745AF2" :show-text="false"/>
      </div>
    </div>
  </div>
</template>

<style scoped>
.title {
  border-left: 4px solid #32ffc7;
  font-size: 18px;
  color: #fff;
  padding-left: 8px;
  height: 18px;
  line-height: 18px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.body {
  display: flex;
  width: 100%;
  height: calc(100% - 18px - 16px);

  .left {
    flex: 4;
    height: 100%;

    .bg{
      padding: 10px;
      width: calc(100% - 20px);
      height: calc(100% - 40px);
      background-color: #09365b;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }

  .right {
    flex: 7;
    padding: 0 20px;
    width: calc(100% - 40px);
    font-size: 18px;

    > div {
      color: #aab4c0;
      padding: 10px;

      > span {
        color: white;
        float: right;
      }
    }
  }
}
</style>